<template>
  <view class="book-city">
    <!-- 轮播图 -->
    <swiper :indicator-dots="true" :autoplay="true" class="swiper">
      <swiper-item v-for="(item, index) in banners" :key="index">
        <image :src="item.image" mode="aspectFill" class="swiper-img" />
      </swiper-item>
    </swiper>

    <!-- 排行榜 -->
    <view class="section" v-for="(rank, index) in ranks" :key="index">
      <view class="section-title">{{ rank.title }}</view>
      <scroll-view scroll-x class="rank-scroll">
        <view
          class="rank-item"
          v-for="(book, i) in rank.list"
          :key="i"
          @click="goToBookDetail(book)"
        >
          <image :src="book.cover" class="book-cover" />
          <text class="book-title">{{ book.title }}</text>
        </view>
      </scroll-view>
    </view>

    <!-- 推荐图书 -->
    <view class="section">
      <view class="section-title">编辑推荐</view>
      <view class="recommend-list">
        <view
          class="recommend-item"
          v-for="(book, index) in recommendBooks"
          :key="index"
          @click="goToBookDetail(book)"
        >
          <image :src="book.cover" class="recommend-cover" />
          <view class="recommend-info">
            <text class="title">{{ book.title }}</text>
            <text class="author">{{ book.author }}</text>
            <text class="desc">{{ book.desc }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      banners: [
        {
          image: "https://picsum.photos/750/400?random=1",
        },
        {
          image: "https://picsum.photos/750/400?random=2",
        },
        {
          image: "https://picsum.photos/750/400?random=3",
        },
      ],
      ranks: [
        {
          title: "畅销榜",
          list: [
            {
              id: 1,
              cover: "https://picsum.photos/200/300?random=4",
              title: "书籍1",
              author: "作者1",
              desc: "这是一本非常畅销的书籍，讲述了...",
            },
            {
              id: 2,
              cover: "https://picsum.photos/200/300?random=5",
              title: "书籍2",
              author: "作者2",
              desc: "这是一本非常畅销的书籍，讲述了...",
            },
            {
              id: 3,
              cover: "https://picsum.photos/200/300?random=6",
              title: "书籍3",
              author: "作者3",
              desc: "这是一本非常畅销的书籍，讲述了...",
            },
          ],
        },
        {
          title: "新书榜",
          list: [
            {
              id: 4,
              cover: "https://picsum.photos/200/300?random=7",
              title: "书籍4",
              author: "作者4",
              desc: "这是一本新书，讲述了...",
            },
            {
              id: 5,
              cover: "https://picsum.photos/200/300?random=8",
              title: "书籍5",
              author: "作者5",
              desc: "这是一本新书，讲述了...",
            },
            {
              id: 6,
              cover: "https://picsum.photos/200/300?random=9",
              title: "书籍6",
              author: "作者6",
              desc: "这是一本新书，讲述了...",
            },
          ],
        },
      ],
      recommendBooks: [
        {
          id: 7,
          cover: "https://picsum.photos/200/300?random=10",
          title: "推荐书籍1",
          author: "推荐作者1",
          desc: "这是一本编辑推荐的书籍，讲述了...",
        },
        {
          id: 8,
          cover: "https://picsum.photos/200/300?random=11",
          title: "推荐书籍2",
          author: "推荐作者2",
          desc: "这是一本编辑推荐的书籍，讲述了...",
        },
        {
          id: 9,
          cover: "https://picsum.photos/200/300?random=12",
          title: "推荐书籍3",
          author: "推荐作者3",
          desc: "这是一本编辑推荐的书籍，讲述了...",
        },
      ],
    };
  },
  methods: {
    goToBookDetail(book) {
      uni.navigateTo({
        url: `/pages/book-detail/book-detail?id=${book.id}`,
      });
    },
  },
};
</script>

<style scoped>
.book-city {
  padding: 20rpx;
}

.swiper {
  height: 300rpx;
  border-radius: 20rpx;
  overflow: hidden;
}

.swiper-img {
  width: 100%;
  height: 100%;
}

.section {
  margin-top: 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.rank-scroll {
  white-space: nowrap;
}

.rank-item {
  display: inline-block;
  width: 200rpx;
  margin-right: 20rpx;
  text-align: center;
}

.book-cover {
  width: 200rpx;
  height: 280rpx;
  border-radius: 10rpx;
}

.book-title {
  display: block;
  font-size: 28rpx;
  margin-top: 10rpx;
}

.recommend-list {
  display: flex;
  flex-direction: column;
}

.recommend-item {
  display: flex;
  margin-bottom: 30rpx;
}

.recommend-cover {
  width: 180rpx;
  height: 250rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.recommend-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
}

.author {
  font-size: 28rpx;
  color: #666;
}

.desc {
  font-size: 26rpx;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>